<template>
  <div class="box">
    <img src="/public/shop.jpg" alt="" width="100%" height="99%" />
    <div class="box1">
      <p class="p1">社区团购</p>
      <p class="p2">A X L a b 社 区 团 管 理 中 心</p>
    </div>
    <div class="box2">
      <div class="box3">
        <h4>Axlab社区团购</h4>
        <p style="margin-top: 10px; color: #999999; font-size: 14px">
          注册系统管理账号
        </p>
        <div class="box4">
          <el-input v-model="username" style="width: 100%; height: 45px" placeholder="请输入手机号/邮箱" :prefix-icon="User" />
          <el-input v-model="password" style="width: 100%; height: 45px" placeholder="请输入密码" :prefix-icon="Unlock" type="password" show-password/>
          <el-input v-model="password1" style="width: 100%; height: 45px" placeholder="请再次输入密码" :prefix-icon="Unlock" type="password" show-password/>
          <p style="display: flex;">
            <el-input v-model="Verification" style="width: 70%; height: 45px" placeholder="请输入验证码"
              :prefix-icon="ChatDotRound" />
            <el-button type="danger" style="width: 30%; height: 45px" @click="getcode"
              :disabled="isSendingCode || countdown > 0">{{ countdown > 0 ? `重新发送(${countdown})` : '发送验证码'
              }}</el-button>
          </p>
        </div>
        <van-button type="danger" block style="width: 100%; margin-top: 20px" @click="submit">立即注册</van-button>
      </div>
    </div>

    <van-overlay :show="show" @click="show = false">
      <el-card v-if="visible" style="margin: 210px auto;width: 450px;">
        <slide-verify ref="slide" slider-text="向右滑动->" :imgs="images" @success="onSuccess" @fail="onFail"
          class="slide"></slide-verify>
      </el-card>
    </van-overlay>


  </div>
</template>

<script setup>
import { Unlock, User, ChatDotRound } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue'
import { ElMessage } from "element-plus";
// 引入依赖对象
import SlideVerify from "vue3-slide-verify";
// 引入依赖样式
import "vue3-slide-verify/dist/style.css";
import axios from 'axios';
const router = useRouter();
const password1 = ref('');
const password = ref('');
const username = ref('');
const code = ref('');
const show = ref(false);
const phoneRegex = /^1\d{10}$/;  // 匹配中国手机号（以1开头，11位数字）
const qqEmailRegex = /^[0-9]{5,12}@qq\.(com|cn)$/;  // 支持@qq.com 和@qq.cn  // 匹配QQ邮箱，QQ号长度一般为5到12位
const back = () => {
  router.go(-1);
};
const getcode = () => {
  if (phoneRegex.test(username.value) || qqEmailRegex.test(username.value)) {
    if (password.value == password1.value) {
      visible.value = true;
      show.value = true
    } else {
      ElMessage({
        message: '两次输入的密码不一样',
        type: 'error',
      })
    }
  } else {
    ElMessage({
      message: '请输入正确的电话/邮箱',
      type: 'error',
    })
  }

}
const submit = async () => {
  if (phoneRegex.test(username.value)) {
    //手机号注册接口
    const { data } = await axios.post('http://localhost:3000/jsb/addphone', {
      username: username.value,
      password: password.value
    })

    if (data.code == 200) {
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      router.push('/login')
    } else {
      ElMessage({
        message: '注册失败',
        type: 'error',
      })
    }
  } else if (qqEmailRegex.test(username.value)) {
    // 邮箱注册接口
    if (Verification.value == code.value) {
      const { data } = await axios.post('http://localhost:3000/jsb/register', {
        username: username.value,
        password: password.value,
        code: code.value
      })
      console.log('====================================');
    console.log(data);
    console.log('====================================');
      if (data.code == 200) {
        ElMessage({
          message: '注册成功',
          type: 'success',
        })
        router.push('/login')
      } else {
        ElMessage({
          message: '注册失败',
          type: 'error',
        })
      }

    }
  } else {
    alert('请输入正确的电话/邮箱')
  }
}

const Verification = ref('');

const Register = () => {
  router.push('/Register')
}
const visible = ref(false);
const images = reactive([
  'https://t7.baidu.com/it/u=2609096218,1652764947&fm=193&f=GIF',
  'https://t7.baidu.com/it/u=2541348729,1193227634&fm=193&f=GIF',
  'https://t7.baidu.com/it/u=2673836711,2234057813&fm=193&f=GIF',
])

// 拼图验证成功回调
const onSuccess = async () => {
  if (phoneRegex.test(username.value)) {
    show.value = false;
    //手机号注册接口
    const { data } = await axios.get('http://localhost:3000/jsb/getphone?phone=' + username.value)
    if (data.code == 400) {
      ElMessage.error('该手机号已被注册')
    } else {
      ElMessage.success("验证成功！");
      // 隐藏拼图
      visible.value = false;
      // 拼图验证成功，发送邮箱验证码
      sendVerificationCode();
    }
  } else if (qqEmailRegex.test(username.value)) {
    show.value = false;
    // 发送邮箱接口
    const { data } = await axios.get('http://localhost:3000/jsb/getcode?email=' + username.value)
    if (data.code == 400) {
      ElMessage.error('该邮箱已被注册')
    } else {
      ElMessage.success("验证成功！");
      // 隐藏拼图
      visible.value = false;
      // 拼图验证成功，发送邮箱验证码
      sendVerificationCode();
    }
  } else {
    alert('请输入正确的电话/邮箱')
  }

}

// 拼图验证失败回调
const onFail = () => {
  ElMessage.error("验证不通过!")
}

// 发送验证码按钮禁用标识
let isSendingCode = ref(false);
// 倒计时变量
let countdown = ref(0);
// 发送验证码，调验证码接口
const sendVerificationCode = async () => {
  if (phoneRegex.test(username.value)) {
    show.value = false;
    //手机号注册接口
    const { data } = await axios.get('http://localhost:3000/jsb/getphone?phone=' + username.value)
    isSendingCode.value = true;
    // 设置倒计时时间，这里假设为60秒
    countdown.value = 60;
    // 倒计时效果
    const countdownInterval = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(countdownInterval);
        isSendingCode.value = false;
      }
    }, 1000);
  } else if (qqEmailRegex.test(username.value)) {
    show.value = false;
    // 发送邮箱接口
    const { data } = await axios.get('http://localhost:3000/jsb/code?email=' + username.value)

    code.value = data.code
    isSendingCode.value = true;
    // 设置倒计时时间，这里假设为60秒 
    countdown.value = 60;
    // 倒计时效果
    const countdownInterval = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(countdownInterval);
        isSendingCode.value = false;
      }
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100vw;
  height: 100vh;

  img {
    filter: blur(5px);
    z-index: -1;
  }
}

.box1 {
  position: absolute;
  top: 120px;
  left: 50px;
  color: rgb(255, 255, 255);

  .p1 {
    font-size: 80px;
  }

  .p2 {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 700;
  }
}

.box2 {
  width: 450px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 0;
  right: 0;
}

.box3 {
  width: 80%;
  height: 50%;
  margin: 150px auto;
}

.box4 {
  width: 100%;
  height: 220px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.slide {
  margin: 0 auto;
}
</style>